"use client"
import Content from '@/app/admin/page'
import React, { useEffect, useState } from 'react';
import { Button, Space, Table, Tag, Popconfirm, message } from 'antd';
import Modal from './components/Modal'

import { getUsers, updUser, delUser } from '@/api/usersApi'
import dayjs from 'dayjs';
import { customers } from '@/utils/data.json'
export default function Home() {
  const [data, setData] = useState([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modelPrpos, setModelPrpos] = useState({});

  const Init = async () => {
    const res = await getUsers()
    if (res?.flag) { setData(res.data) }
  }
  useEffect(() => {
    Init()
  }, [])
  // 禁用确认框
  const confirm = async (_id: string, status: string) => {
    await updUser({ _id, status })
    await Init()
    message.success('操作成功');
  };
  // 注销确认框
  const DelUser = async (_id: string) => {
    await delUser({ _id })
    await Init()
    message.success('操作成功');
  };
  const columns = [
    // {
    //   title: '客户 ID',
    //   dataIndex: '_id',
    //   key: '_id',
    // },
    {
      title: '头像',
      dataIndex: 'picture',
      key: 'picture',
      render: (text: any) => {
        return text ? <img src={text} alt="" height={50} width={50} /> : '-'
      }
    },
    {
      title: '用户名',
      dataIndex: 'name',
      key: 'name',
      width: 100,
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '密码',
      dataIndex: 'password',
      key: 'password',
      width: 100,
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '昵称',
      dataIndex: 'nick',
      key: 'nick',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      key: 'phone',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '身份证号',
      dataIndex: 'idCard',
      key: 'idCard',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '地址',
      dataIndex: 'address',
      key: 'address',
      ellipsis: true,
      width: 160,
      render: (text: any) => {
        return text.length ? text : '-'
      }
    },
    {
      title: '客户类型',
      dataIndex: 'customerType',
      key: 'customerType',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '企业名称',
      dataIndex: 'companyName',
      key: 'companyName',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '信用评分',
      dataIndex: 'creditScore',
      key: 'creditScore',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '累计租赁天数',
      dataIndex: 'lastRentDays',
      key: 'lastRentDays',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '推荐码',
      dataIndex: 'creditScore',
      key: 'creditScore',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '账户状态',
      key: 'status',
      dataIndex: 'status',
      render: (_: any, record: any) => (
        _ === '注销' ? (
          <Tag color='volcano' key={_}>
            {_}
          </Tag>
        ) :
          _ === '正常' ? (
            <Tag color='green' key={_}>
              {_}
            </Tag>
          ) : (
            <Tag color='geekblue' key={_}>
              {_}
            </Tag>
          )
      ),
    },
    {
      title: '注册时间',
      dataIndex: 'registrationDate',
      key: 'registrationDate',
      width: 160,
      render: (_: any) => dayjs(_).format('YYYY-MM-DD HH:mm:ss')
    },
    {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
      render: (text: any) => {
        return text || '-'
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 200,
      render: (_: any, record: { _id: string; status: string; }) => (
        <Space size="middle">
          <Button type="primary" size='small' onClick={() => { setIsModalOpen(true); setModelPrpos({ record, type: '编辑' }) }}>编辑</Button>
          {/* <Button color="green" variant="solid" size='small' onClick={() => { setIsModalOpen(true); setModelPrpos({ userInfo: record,  type: '续时' }) }}>续时</Button> */}
          {record.status === '冻结' ?
            <Button color='magenta' variant="solid" size='small' onClick={() => confirm(record._id, '正常')}>解除冻结</Button> :
            <Button color="default" variant="solid" size='small' onClick={() => confirm(record._id, '冻结')}>冻结</Button>
          }
          <Popconfirm
            title="是否注销该用户账号?"
            onConfirm={() => DelUser(record._id)}
            okText="是"
            cancelText="否"
          >
            <Button color="danger" variant="solid" size='small'>注销</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (<Content>
    <div
      style={{
        padding: 24,
        minHeight: 360,
        background: '#fff',
        borderRadius: 10,
        flex: 1,
        overflow: 'auto'
      }}
    >
      <Button type="primary" style={{ marginBottom: 10 }}
        onClick={() => { setIsModalOpen(true); setModelPrpos({ type: '新增' }) }}>新增</Button>
      <Table columns={columns} dataSource={data} rowKey={(record: any) => record._id} />
      <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} Init={Init} modelPrpos={modelPrpos} />
    </div>
  </Content>
  );
};
